<template>
  <div class="cms-upload">
    <div class="cms-upload-box"> <!--  -->
      <el-upload name="uploadFile" :action="upLoadUrl" :data="data" :show-file-list="false" accept=".mp4"
                 :on-success="handleAvatarSuccess" :on-progress="handleAvatarProgress" class="cms-upload">
        <i v-if="videoUrl==''" class="el-icon-plus avatar-uploader-icon"></i>

      </el-upload>
      <div class="cms-show-video" v-if="videoUrl!=''">
        <video :src="videoUrl" class="back-img"></video>
        <div class="img-porp" @dblclick="dialogVisible=true">
          <div class="el-icon-zoom-in cms-zoom-icon">
            <span class="cms-zoom-font">双击查看视频</span>
          </div>
          <div class="cms-img-bottom">
            <el-upload name="uploadFile" :action="upLoadUrl" :data="data" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :on-progress="handleAvatarProgress" class="cms-again">
              <a href="javascript:void(0)">修改</a>
            </el-upload>
            <div class="cms-again delete">
              <a href="javascript:void(0)" @click="deleteVideo">删除</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 进度条 -->
      <el-progress type="circle" :percentage="percentage" :status="status" class="cms-progress"
                   v-if="uploadStar"></el-progress>
      <el-dialog :visible.sync="dialogVisible" size="tiny" v-if="dialogVisible">
        <video :src="videoUrl" class="avatar" controls="controls" style="width: 100%;height: 100%"></video>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getRand} from "@/untils/random";
  import {signParams} from "@/untils/sign";
  import api from "@/api/api";
  import axios from "axios";

  let rand = getRand();
  export default {
    name: 'cms-video-upload',
    props: {
      field: {
        type: String,
        default: '',
      },
      src: {
        type: String,
        default: '',
      },
      index: {
        type: Number,
        default: 0,
      },
      pIndex: {
        type: Number,
        default: 0,
      },
      channelId: {
        type: Number,
        default: 0
      },
      //上传路径
      uploadPath: {
        type: String,
        default: ""
      },
      action: {
        type: String,
        default: ''
      },
      upLoadWay: {
        type: Number,
        default: 0
      },
      fileRemark: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        videoUrl: (this.src != '' && this.src.indexOf('http') < 0) ? this.$getUrl() + this.src : this.src,
        upLoadUrl: this.$store.state.sys.baseUrl + (this.action == "" ? this.$api.bsaeUpload : this.action),
        params: {
          appId: process.env.appId,
          sessionKey: localStorage.getItem("sessionKey"),
          type: "ossVideo",
          nonceStr: rand,
          uploadPath: this.uploadPath
        },
        data: {},
        percentage: 0,
        status: "success",
        uploadStar: false,
        dialogVisible: false,
        uploadInfo: {
          channelId: '',
          fileType: '',
          fileRemark: ''
        },
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {//上传成功服务器响应
        if (res.code == "200" && res.body != '') {
          this.status = "success";
          setTimeout(() => {
            this.uploadStar = false;
            this.percentage = 0;
            if (this.upLoadWay == 1) {
              let attachmentList = res.body;
              let attachment = attachmentList[0];
              attachment.fileRemark = this.fileRemark;
              this.uploadInfo.attachmentData = JSON.stringify(attachmentList);
              this.videoUrl = attachment.filePath;
              this.uploadInfo.channelId = this.channelId;
              this.uploadInfo.fileType = "video";
              this.uploadInfo.uploadWay = 1;
              this.saveAttachment();
              this.$emit('get', this.videoUrl, this.field, this.index, this.pIndex);
              this.$emit('change', this.videoUrl, this.index);
            } else {
              if (res.body.uploadPath.indexOf("http") >= 0) {
                this.videoUrl = res.body.uploadPath;
                this.$emit('get', res.body.uploadPath, this.field, this.index, this.pIndex);
                this.$emit('change', res.body.uploadPath, this.index);
              } else {
                this.videoUrl = this.$getUrl() + res.body.uploadPath;
                this.$emit('get', res.body.uploadPath, this.field, this.index, this.pIndex);
                this.$emit('change', res.body.uploadPath, this.index, this.pIndex);
              }
            }

          }, 1000);
        } else {
          this.errorMessage(res.code + ":" + res.message);
          this.status = "exception";
          setTimeout(() => {
            this.uploadStar = false;
            this.percentage = 0;
            this.status = "exception";
            this.videoUrl = "";
            this.$emit('get', this.src, this.field, this.index, this.pIndex);
            this.$emit('change', this.src, this.index, this.pIndex);
          }, 1000);

          this.errorMessage("上传失败:" + res.code);
        }
      },
      handleAvatarProgress(event, file, fileList) {//进度
        this.videoUrl = "";
        this.uploadStar = true;
        this.percentage = parseInt(event.percent.toFixed(1));
      },
      deleteVideo() {
        this.uploadStar = false;
        this.percentage = 0;
        this.status = "success";
        this.$emit('get', '', this.field, this.index, this.pIndex);
        this.$emit('change', '', this.index, this.pIndex);
        this.videoUrl = "";
      },
      saveAttachment() {
        axios.post(this.$api.attachmentBatchSave, this.uploadInfo).then(res => {
          if (res.code == "200") {
            this.successMessage('上传成功');
            setTimeout(() => {
              this.uploadInfo = {}
            }, 1000);
          }
          this.loading = false;
        })
      }
    },
    created() {
      this.data = signParams(this.params, process.env.appKey);
    },
    watch: {
      src(curVal, oldVal) {
        console.log("curVal:" + curVal);
        if (curVal == '') {
          this.videoUrl = '';
        } else if (curVal.indexOf("http") >= 0) {
          this.videoUrl = curVal;
        } else {
          this.videoUrl = this.$getUrl() + curVal;
        }
      },
      params: {
        handler(curVal, oldVal) {
          this.data = signParams(curVal, process.env.appKey);
        },
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  $width: 130px;
  $height: 130px;
  .cms-upload {
    display: flex;
    align-items: center;
  }

  .cms-upload-box {
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: $width;
    height: $width;
  }

  .mark-box {
    margin-left: 10px;
  }

  .avatar-uploader .el-upload:hover .img-porp {
    display: block;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: $width;
    height: $height;
    line-height: $height;
    text-align: center;
  }

  .cms-show-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    cursor: pointer;
  }

  .cms-zoom-icon {
    color: #fff;
    font-size: 20px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    margin-left: -51px;
    margin-top: -15px;
  }

  .cms-zoom-font {
    font-size: 14px;
    position: relative;
    top: -3px;
  }

  .cms-show-video:hover .img-porp {
    display: block;
  }

  .back-img {
    width: 100%;
    height: 100%;
  }

  .img-porp {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    z-index: 49;
  }

  .cms-img-bottom {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    position: absolute;
    bottom: 0;
    z-index: 50;
  }

  .cms-again {
    width: 50%;
    background: #1ab0fb;
    text-align: center;

    a {
      color: #fff;
      font-size: 12px;
    }
  }

  .delete {
    width: 50%;
    background: #ff7653;
    text-align: center;

    a {
      color: #fff;
      font-size: 12px;
    }
  }

  .cms-progress {
    position: absolute;
    top: 0;
    width: $width;
    height: $height;
    z-index: 888;
  }

</style>
